<template>
	<view class="app_Cont">
		<view class="showCont" v-if="showCont">
			<view class="bannerCont" v-if="false">
				<image mode="widthFix" src="/static/img/bookBanner.png"></image>
			</view>
			<view class="formCont">
				<view class="formTitle" @click="openStep1 = !openStep1">
					<view>基本信息<span class="titleTip">(投递简历需完善)</span></view>
					<view class="closeOpen" >{{openStep1?'收起':'展开'}}</view>
				</view>
				<view class="formMain" v-if="openStep1">
					<view class="formItem">
						<view class="inputName">
						    <view class="mustIcon">*</view>
						    <view class="inputNameText">姓名</view>
					    </view>
						<view class="inputValue">
							<input maxlength="10" v-model="formInfo.real_name" placeholder="请输入真实姓名"  />
						</view>
					</view>
					<view class="formItem">
						<view class="inputName">
						    <view class="mustIcon">*</view>
						    <view class="inputNameText">手机号</view>
					    </view>
						<view class="inputValue">
							<input maxlength="11" type="number" v-model="formInfo.mobile" placeholder="请输入手机号"  />
						</view>
						<view :class="!isGetting&&checkPhone()?'getCode':'getCode disCode'" @click="getCode">{{codeText}}</view>
					</view>
					<view class="formItem">
						<view class="inputName">
						    <view class="mustIcon">*</view>
						    <view class="inputNameText">验证码</view>
					    </view>
						<view class="inputValue">
							<input maxlength="4" type="number" v-model="formInfo.code" placeholder="请输入验证码"  />
						</view>
					</view>
					<view class="formItem">
						<view class="inputName">
						    <view class="mustIcon">*</view>
						    <view class="inputNameText">身份证号</view>
					    </view>
						<view class="inputValue">
							<input maxlength="18" @input="inputIdcard" v-model="formInfo.idcard" placeholder="请输入身份证号"  />
						</view>
						<view v-if="checkIdCard()" class="iconfont icon-gouxuan1"></view>
					</view>
				</view>
			</view>
			<view class="formCont">
				<view class="formTitle" @click="openStep2 = !openStep2">
					<view>找船意向<span class="titleTip">(投递简历需完善)</span></view>
					<view class="closeOpen" >{{openStep2?'收起':'展开'}}</view>
				</view>
				<view class="formMain" v-if="openStep2">
					<view class="formItem">
						<view class="inputName">
						    <view class="mustIcon">*</view>
						    <view class="inputNameText">申请职位</view>
					    </view>
						<view class="inputOut">
							<view class="inputMask" @click="showPosition = true"></view>
							<input
							  v-model="formInfo.zw"
							  placeholder="选择你申请的职位"
							/>
						</view>
						<view
							@click="showPosition = true"
							class="iconfont icon-xiala"
						></view>
					</view>
					<view class="formItem">
						<view class="inputName">
						    <view class="mustIcon">*</view>
						    <view class="inputNameText">证书等级</view>
					    </view>
						<view class="inputOut">
							<view class="inputMask" @click="showzs = true"></view>
							<input
							  v-model="formInfo.zs"
							  placeholder="选择你的证书等级"
							/>
						</view>
						<view
							@click="showzs = true"
							class="iconfont icon-xiala"
						></view>
					</view>
					<view class="formItem">
						<view class="inputName">
						    <view class="mustIcon">*</view>
						    <view class="inputNameText">期望薪资</view>
					    </view>
						<view class="inputValue">
							<input maxlength="7" type="number" v-model="formInfo.qwyx" placeholder="请输入期望薪资"/>
						</view>
						<view class="">美元</view>
					</view>
					<view class="formItem">
						<view class="inputName">
						    <view class="mustIcon">*</view>
						    <view class="inputNameText">学历</view>
					    </view>
						<view class="inputOut">
							<view class="inputMask" @click="showxl = true"></view>
							<input
							  v-model="formInfo.xl"
							  placeholder="选择你的学历"
							/>
						</view>
						<view
							@click="showxl = true"
							class="iconfont icon-xiala"
						></view>
					</view>
					<view class="formItem">
						<view class="inputName">
						    <view class="mustIcon">*</view>
						    <view class="inputNameText">英语水平</view>
					    </view>
						<view class="inputOut">
							<view class="inputMask" @click="showEng = true"></view>
							<input
							  v-model="formInfo.yysp"
							  placeholder="选择你的英语水平"
							/>
						</view>
						<view
							@click="showEng = true"
							class="iconfont icon-xiala"
						></view>
					</view>
					<view class="formItem">
						<view class="inputName">
						    <view class="mustIcon">*</view>
						    <view class="inputNameText">工作经验</view>
						</view>
						<view class="inputValue">
							<input type="number" maxlength="2" v-model="formInfo.gzjy" placeholder="请输入工作经验"/>
						</view>
						<view class="">年经验</view>
					</view>
					<view class="formItem">
						<view class="inputName">
						    <view class="mustIcon">*</view>
						    <view class="inputNameText">船舶类型</view>
					    </view>
						<view class="inputOut">
							<view class="inputMask" @click="showcblx = true"></view>
							<input
							  v-model="formInfo.cblx"
							  placeholder="选择你期望的船舶类型"
							/>
						</view>
						<view
							@click="showcblx = true"
							class="iconfont icon-xiala"
						></view>
					</view>
					<view class="formItem">
						<view class="inputName">
						    <view class="mustIcon">*</view>
						    <view class="inputNameText">期望航线</view>
					    </view>
						<view class="inputOut">
							<view class="inputMask" @click="showhxyq = true"></view>
							<input
							  v-model="formInfo.hxyq"
							  placeholder="选择你期望的航线"
							/>
						</view>
						<view
							@click="showhxyq = true"
							class="iconfont icon-xiala"
						></view>
					</view>
					<view class="formItem">
						<view class="inputName">
						    <view class="inputNameText">择期登船</view>
					    </view>
						<view class="inputOut">
							<view class="inputMask" @click="showzqdc = true"></view>
							<input
							  v-model="formInfo.zqdc_time"
							  placeholder="选择你期望上船时间"
							/>
						</view>
						<view
							@click="showhxyq = true"
							class="iconfont icon-xiala"
						></view>
					</view>
					<view class="formItem">
						<view class="inputName">
							<view class="mustIcon">*</view>
							<view class="inputNameText">住址</view>
						</view>
						<view class="inputValue">
							<input maxlength="50" v-model="formInfo.jg" placeholder="请输入当前城市及住址"  />
						</view>
					</view>
				</view>
			</view>
			<view class="formCont">
				<view class="formTitle" @click="openStep5 = !openStep5">
					<view>技能标签</view>
					<view class="closeOpen" >{{openStep5?'收起':'展开'}}</view>
				</view>
				<view class="tagsCont" v-if="openStep5">
					<view @click="tagsFn(item)" :class="activeTags.includes(item.name)?'tagsItem tagsActive':'tagsItem'" :key="index" v-for="(item,index) in allTags">{{item.name}}</view>
				</view>
			</view>
			<view class="formCont">
				<view class="formTitle" @click="openStep6 = !openStep6">
					<view>工作经历</view>
					<view class="closeOpen" >{{openStep6?'收起':'展开'}}</view>
				</view>
				<view class="formMain" v-if="openStep6">
					<view class="bookItem" :key="index" v-for="(item,index) in formInfo.resume_experience">
						<view class="bookTop">
							<view class="name">
								<view>{{item.comName}}（{{item.zw}}）</view>
							</view>
							<view class="iconfont icon-gengduo" @click="expCtrlShow(index,item)"></view>
						</view>
						<view class="epxInfo">{{item.scsj}} 至 {{item.xcsj}}</view>
						<view class="expItems">
							<view class="expItem">船名：{{item.cm}}</view>
							<view class="expItem">船型：{{item.cx}}</view>
							<view class="expItem">航区：{{item.hx}}</view>
							<view class="expItem">总吨/马力：{{item.zd}}/{{item.ml}}</view>
						</view>
					</view>
					<view class="addBtn" @click="addExpItem" >+添加工作经历</view>
					<u-popup :show="showExpCtrl" @close="showExpCtrl = false" :closeOnClickOverlay="true" :safeAreaInsetBottom="false" mode="bottom" :round="10">
						<view class="ctrlGroup">
							<view class="ctrlItem hasBottom" @click="editExpItem">编辑经历</view>
							<view class="ctrlItem" @click="showExpDeleteFn">删除经历</view>
						</view>
					</u-popup>
					<u-modal :show="showDeleteExp" :showCancelButton="true" @cancel="showDeleteExp = false" @confirm="deleteExpItem"  content='确定删除此项经历吗?'></u-modal>
					<u-popup :show="showAddExp" @close="showAddExp = false" :closeOnClickOverlay="true" :safeAreaInsetBottom="false" mode="bottom" :round="10">
						<view class="maskCont">
							<view class="maskHead">新增工作经历</view>
							<view class="maskInfo">
								<view class="formItem">
									<view class="inputName">
									    <view class="mustIcon">*</view>
									    <view class="inputNameText">公司</view>
								    </view>
									<view class="inputValue">
										<input maxlength="30" v-model="activeExpItem.comName" placeholder="请输入公司名称"  />
									</view>
								</view>
								<view class="formItem">
									<view class="inputName">
									    <view class="mustIcon">*</view>
									    <view class="inputNameText">船名</view>
								    </view>
									<view class="inputValue">
										<input maxlength="30" v-model="activeExpItem.cm" placeholder="请输入船名"  />
									</view>
								</view>
								<view class="formItem">
									<view class="inputName">
									    <view class="mustIcon">*</view>
									    <view class="inputNameText">职务</view>
								    </view>
									<view class="inputValue">
										<input maxlength="30" v-model="activeExpItem.zw" placeholder="请输入职务"  />
									</view>
								</view>
								<view class="formItem">
									<view class="inputName">
									    <view class="mustIcon">*</view>
									    <view class="inputNameText">船型</view>
								    </view>
									<view class="inputValue">
										<input maxlength="30" v-model="activeExpItem.cx" placeholder="请输入船舶类型"  />
									</view>
								</view>
								<view class="formItem">
									<view class="inputName">
									    <view class="mustIcon">*</view>
									    <view class="inputNameText">航区</view>
								    </view>
									<view class="inputValue">
										<input maxlength="30" v-model="activeExpItem.hx" placeholder="请输入航线区域"  />
									</view>
								</view>
								<view class="formItem">
									<view class="inputName">
									    <view class="inputNameText">总吨</view>
								    </view>
									<view class="inputValue">
										<input maxlength="30" type="number" v-model="activeExpItem.zd" placeholder="请输入总吨"  />
									</view>
								</view>
								<view class="formItem">
									<view class="inputName">
									    <view class="inputNameText">马力</view>
								    </view>
									<view class="inputValue">
										<input maxlength="30" type="number" v-model="activeExpItem.ml" placeholder="请输入马力"  />
									</view>
								</view>
								<view class="formItem">
									<view class="inputName">
									    <view class="mustIcon">*</view>
									    <view class="inputNameText">上船时间</view>
									</view>
									<view class="inputOut">
										<view class="inputMask" @click="showStartDate = true"></view>
										<input
										  v-model="activeExpItem.scsj"
										  placeholder="请选择上船时间"
										/>
									</view>
									<view
										@click="showStartDate = true"
										class="iconfont icon-xiala"
									></view>
								</view>
								<u-datetime-picker
									:show="showStartDate"
									v-model="defDate"
									:maxDate="expMaxDate"
									:closeOnClickOverlay="true" 
									@cancel="showStartDate = false" 
									close="showStartDate = false"
									mode="year-month"
									@confirm="sureExpStartFn"
								></u-datetime-picker>
								<view class="formItem">
									<view class="inputName">
									    <view class="mustIcon">*</view>
									    <view class="inputNameText">下船时间</view>
									</view>
									<view class="inputOut">
										<view class="inputMask" @click="showEndDate = true"></view>
										<input
										  v-model="activeExpItem.xcsj"
										  placeholder="请选择下船时间"
										/>
									</view>
									<view
										@click="showEndDate = true"
										class="iconfont icon-xiala"
									></view>
								</view>
								<u-datetime-picker
									:show="showEndDate"
									v-model="defDate"
									:maxDate="expMaxDate"
									:closeOnClickOverlay="true" 
									@cancel="showEndDate = false" 
									close="showEndDate = false"
									mode="year-month"
									@confirm="sureExpEndFn"
								></u-datetime-picker>
								<view class="bookAddBtn" @click="sureAddExp">保存信息</view>
							</view>
						</view>
					</u-popup>
				</view>
			</view>
			<view class="formCont">
				<view class="formTitle" @click="openStep3 = !openStep3">
					<view>补充信息<span class="titleTip">(面试前需完善)</span></view>
					<view class="closeOpen" >{{openStep3?'收起':'展开'}}</view>
				</view>
				<view class="formMain" v-if="openStep3">
					<view class="formItem no_bg">
						<view class="inputName">
						    <view class="inputNameText">个人照片</view>
					    </view>
						<view class="inputValue">
							<u-upload
								:fileList="userImgs"
								@afterRead="afterRead"
								@delete="deletePic"
								name="1"
								multiple
								:maxCount="10"
							></u-upload>
						</view>
					</view>
					<view class="formItem">
						<view class="inputName">
						    <view class="inputNameText">身高</view>
					    </view>
						<view class="inputValue">
							<input maxlength="3" type="number" v-model="formInfo.height" placeholder="请输入你的身高"  />
						</view>
						<view>cm</view>
					</view>
					<view class="formItem">
						<view class="inputName">
						    <view class="inputNameText">体重</view>
					    </view>
						<view class="inputValue">
							<input maxlength="3" type="number" v-model="formInfo.weight" placeholder="请输入你的体重"  />
						</view>
						<view>kg</view>
					</view>
					<view class="formItem">
						<view class="inputName">
						    <view class="inputNameText">鞋码</view>
					    </view>
						<view class="inputValue">
							<input maxlength="2" type="number" v-model="formInfo.shoe_size" placeholder="请输入鞋码"  />
						</view>
						<view>码</view>
					</view>
					<view class="formItem">
						<view class="inputName">
						    <view class="inputNameText">血型</view>
						</view>
						<view class="inputOut">
							<view class="inputMask" @click="showBlood = true"></view>
							<input
							  v-model="formInfo.blood_type"
							  placeholder="选择你的血型"
							/>
						</view>
						<view
							@click="showBlood = true"
							class="iconfont icon-xiala"
						></view>
					</view>
					<view class="formItem">
						<view class="inputName">
						    <view class="inputNameText">工服尺寸</view>
						</view>
						<view class="inputOut">
							<view class="inputMask" @click="showGfcc = true"></view>
							<input
							  v-model="formInfo.gfcc"
							  placeholder="选择你的工服尺寸"
							/>
						</view>
						<view
							@click="showGfcc = true"
							class="iconfont icon-xiala"
						></view>
					</view>
					
					<view class="formItem">
						<view class="inputName">
						    <view class="inputNameText">婚姻状况</view>
						</view>
						<view class="inputOut">
							<view class="inputMask" @click="showHyzk = true"></view>
							<input
							  v-model="formInfo.hyzk"
							  placeholder="选择你的婚姻状况"
							/>
						</view>
						<view
							@click="showHyzk = true"
							class="iconfont icon-xiala"
						></view>
					</view>
					<view class="formItem">
						<view class="inputName">
							<view class="inputNameText">国籍</view>
						</view>
						<view class="inputValue">
							<input maxlength="30" v-model="formInfo.gj" placeholder="请输入国籍"  />
						</view>
					</view>
					<view class="formItem">
						<view class="inputName">
							<view class="inputNameText">出生地</view>
						</view>
						<view class="inputValue">
							<input maxlength="30" v-model="formInfo.csd" placeholder="请输入出生地城市"  />
						</view>
					</view>
					<view class="formItem" v-if="false">
						<view class="inputName">
							<view class="inputNameText">出生地</view>
						</view>
						<view class="inputOut">
							<view class="inputMask" @click="showCity = true"></view>
							<input
							  v-model="formInfo.csd"
							  placeholder="请选择你的出生地"
							/>
						</view>
						<view
							@click="showCity = true"
							class="iconfont icon-xiala"
						></view>
					</view>
					<view class="formItem">
						<view class="inputName">
							<view class="inputNameText">紧急联系人</view>
						</view>
						<view class="inputValue">
							<input maxlength="20" v-model="formInfo.jjlxr_name" placeholder="请输入紧急联系人姓名"  />
						</view>
					</view>
					<view class="formItem">
						<view class="inputName">
						    <view class="inputNameText">紧急人关系</view>
					    </view>
						<view class="inputValue">
							<input maxlength="10" v-model="formInfo.jjlxr_gx" placeholder="请输入紧急人关系"  />
						</view>
					</view>
					<view class="formItem">
						<view class="inputName">
						    <view class="inputNameText">紧急人电话</view>
					    </view>
						<view class="inputValue">
							<input maxlength="11" type="number" v-model="formInfo.jjlxr_mobile" placeholder="请输入紧急人电话"  />
						</view>
					</view>
					<view class="formItem">
						<view class="inputName">
						    <view class="inputNameText">毕业院校</view>
					    </view>
						<view class="inputValue">
							<input maxlength="30" v-model="formInfo.byyx" placeholder="请输入毕业院校"  />
						</view>
					</view>
					<view class="formItem">
						<view class="inputName">
						    <view class="inputNameText">毕业时间</view>
						</view>
						<view class="inputOut">
							<view class="inputMask" @click="showShoolDate = true"></view>
							<input
							  v-model="formInfo.bysj"
							  placeholder="请选择证书毕业时间"
							/>
						</view>
						<view
							@click="showShoolDate = true"
							class="iconfont icon-xiala"
						></view>
					</view>
				</view>
			</view>
			
			<view class="formCont">
				<view class="formTitle">其他备注</view>
				<view class="formItem" style="padding: 0;">
					<textarea style="min-height: 100rpx;" v-model="formInfo.jl_remark" placeholder="请输入其他备注(例如:期望上哪条船等)" ></textarea>
				</view>
			</view>
			<view class="formCont">
				<view class="formTitle" @click="openStep4 = !openStep4">
					<view>证书管理<span class="titleTip">(证书到期前自动提醒)</span></view>
					<view class="closeOpen" >{{openStep4?'收起':'展开'}}</view>
				</view>
				<view class="formMain" v-if="openStep4">
					<view class="bookItem" :key="index" v-for="(item,index) in formInfo.zs_json">
						<view class="bookTop">
							<view class="name">
								<view class="iconfont icon-zhengshu"></view>
								<view>{{item.name}}</view>
							</view>
							<view v-if="!item.dis" class="iconfont icon-gengduo" @click="ctrlShow(index,item)"></view>
							<view v-if="item.dis" class="iconfont icon-bianji" @click="editShow(index,item)"></view>
						</view>
						<view class="bookInfo" >
							<view class="number" v-if="!disNumArr.includes(item.name)">{{[
                            '特殊专业培训证书',
                            '船船保安员证书',
                            '外籍证书',
                          ].includes(item.name)
                            ? '证件种类'
                            : '证件编号'}}：{{item.number}}</view>
							<view class="bookTime">有效期至：{{item.time||'- -'}}</view>
						</view>
					</view>
					<view class="addBtn" @click="addBookItem" >+添加其他证书</view>
				</view>
				<u-popup :show="showBookCtrl" @close="showBookCtrl = false" :closeOnClickOverlay="true" :safeAreaInsetBottom="false" mode="bottom" :round="10">
					<view class="ctrlGroup">
						<view class="ctrlItem hasBottom" @click="editBookItem">编辑证书</view>
						<view class="ctrlItem" @click="showSecondDeleteFn">删除证书</view>
					</view>
				</u-popup>
				<u-modal :show="showDeleteBook" :showCancelButton="true" @cancel="showDeleteBook = false" @confirm="deleteBookItem"  content='确定删除此项证书吗?'></u-modal>
				<u-popup :show="showAddBook" @close="showAddBook = false" :closeOnClickOverlay="true" :safeAreaInsetBottom="false" mode="bottom" :round="10">
					<view class="maskCont">
						<view class="maskHead">新增证书</view>
						<view class="maskInfo">
							<view class="formItem">
								<view class="inputName">
								    <view class="mustIcon">*</view>
								    <view class="inputNameText">证书名称</view>
							    </view>
								<view class="inputValue">
									<input maxlength="30" :disabled="activeBookItem.dis" v-model="activeBookItem.name" placeholder="请输入证书名称"  />
								</view>
							</view>
							<view class="formItem" v-if="!disNumArr.includes(activeBookItem.name) ">
								<view class="inputName">
								    
								    <view class="inputNameText">{{[
									'特殊专业培训证书',
									'船船保安员证书',
									'外籍证书',
								  ].includes(activeBookItem.name)
									? '证件种类'
									: '证件编号'}}</view>
							    </view>
								<view class="inputValue">
									<input maxlength="30" v-model="activeBookItem.number" :placeholder="[
									'特殊专业培训证书',
									'船船保安员证书',
									'外籍证书',
								  ].includes(activeBookItem.name)
									? '请输入证件种类'
									: '请输入证件编号'"  />
								</view>
							</view>
							<view class="formItem">
								<view class="inputName">
								    
								    <view class="inputNameText">到期日期</view>
								</view>
								<view class="inputOut">
									<view class="inputMask" @click="showDate = true"></view>
									<input
									  v-model="activeBookItem.time"
									  placeholder="请选择证书到期日期"
									/>
								</view>
								<view
									@click="showDate = true"
									class="iconfont icon-xiala"
								></view>
							</view>
							<view class="bookAddBtn" @click="sureAddBook">保存信息</view>
						</view>
					</view>
				</u-popup>
			</view>
			<view class="formCont">
				<view class="formTitle">
					<view>证书附件照</view>
				</view>
				<view class="fileGroup">
					<u-upload
						:fileList="fileImgs"
						@afterRead="fileAfter"
						@delete="deleteFilePic"
						name="1"
						multiple
						:maxCount="10"
					></u-upload>
				</view>
			</view>
			<view class="ctrlCont">
				<!-- <view class="saveBtn plainBtn" @click="downFn">一键下载简历</view> -->
				<view class="saveBtn" @click="saveFn">保存在线简历</view>
			</view>
		</view>
		<u-datetime-picker
			:show="showzqdc"
			v-model="defDate"
			:min-date="minDate"
			:closeOnClickOverlay="true" 
			@cancel="showzqdc = false" 
			close="showzqdc = false"
			mode="year-month"
			@confirm="sureZqdcFn"
		></u-datetime-picker>
		<u-datetime-picker :show="showDate" :minDate="minDate" :maxDate="maxDate" v-model="defDate" mode="date" :closeOnClickOverlay="true" @cancel="showDate = false" close="showDate = false" @confirm="confirmDate" ></u-datetime-picker>
		<u-datetime-picker :show="showShoolDate" :minDate="minSchoolDate" :maxDate="expMaxDate" v-model="defShoolDate" mode="date" :closeOnClickOverlay="true" @cancel="showShoolDate = false" close="showShoolDate = false" @confirm="confirmShoolDate" ></u-datetime-picker>
		<u-picker :show="showPosition" @confirm="positionSureFn" @cancel="showPosition = false" @close="showPosition = false" :closeOnClickOverlay="true" :columns="positionArr"></u-picker>
		<u-picker :show="showzs" @confirm="zsSureFn" @cancel="showzs = false" @close="showzs = false" :closeOnClickOverlay="true" :columns="zsArr"></u-picker>
		<u-picker :show="showxl" @confirm="xlSureFn" @cancel="showxl = false" @close="showxl = false" :closeOnClickOverlay="true" :columns="xlArr"></u-picker>
		<u-picker :show="showEng" @confirm="engSureFn" @cancel="showEng = false" @close="showEng = false" :closeOnClickOverlay="true" :columns="engArr"></u-picker>
		<u-picker :show="showcblx" @confirm="cblxSureFn" @cancel="showcblx = false" @close="showcblx = false" :closeOnClickOverlay="true" :columns="cblxArr"></u-picker>
		<u-picker :show="showhxyq" @confirm="hxyqSureFn" @cancel="showhxyq = false" @close="showhxyq = false" :closeOnClickOverlay="true" :columns="hxyqArr"></u-picker>
		<u-picker :show="showCity" ref="cityPicker" :columns="cityArr" @confirm="citySureFn" @change="changeCityFn" @cancel="showCity = false" @close="showCity = false" :closeOnClickOverlay="true"></u-picker>
		<u-picker :show="showBlood" @confirm="bloodSureFn" @cancel="showBlood = false" @close="showBlood = false" :closeOnClickOverlay="true" :columns="bloodArr"></u-picker>
		<u-picker :show="showGfcc" @confirm="gfccSureFn" @cancel="showGfcc = false" @close="showGfcc = false" :closeOnClickOverlay="true" :columns="gfccArr"></u-picker>
		<u-picker :show="showHyzk" @confirm="hyzkSureFn" @cancel="showHyzk = false" @close="showHyzk = false" :closeOnClickOverlay="true" :columns="hyzkArr"></u-picker>
		<u-notify ref="uNotify"></u-notify>
		<u-toast ref="uToast"></u-toast>
		<load v-if="!showCont"></load>
		<subLoad v-if="showSub"></subLoad>
		<u-modal :show="showModal" :showCancelButton="true" @cancel="showModal = false" title="成功提示" @confirm="modalSure"  :content='modalCont'></u-modal>
	</view>
</template>

<script>
	import city from "@/utils/city";
	import api from '@/http/api.js'
	import upfile from '@/utils/upfile.js'
	import getCate from '@/utils/getCate.js'
	import ruleCheck from '@/utils/ruleCheck.js'
	import load from '@/components/load.vue'
	import subLoad from '@/components/sub.vue'
	export default {
		components:{load,subLoad},
		data() {
			return {
				showSub:false,
				showCont:false,
				showModal:false,
				modalCont:'',
				openStep1:true,
				openStep2:true,
				openStep3:false,
				openStep4:false,
				openStep5:false,
				openStep6:false,
				showDate:false,
				showStartDate:false,
				showEndDate:false,
				showShoolDate:false,
				defDate: Number(new Date()),
				defShoolDate:Number(new Date()),
				minDate:Number(new Date()),
				minSchoolDate:Number(new Date())-50*365*24*60*60*1000,
				maxDate:Number(new Date())+40*365*24*60*60*1000,
				expMaxDate:Number(new Date()),
				showAddBook:false,
				showAddExp:false,
				showzqdc:false,
				showBookCtrl:false,
				showExpCtrl:false,
				showDeleteBook:false,
				showDeleteExp:false,
				showPosition:false,
				showxl:false,
				showEng:false,
				showcblx:false,
				showhxyq:false,
				showzs:false,
				showCity:false,
				showBlood:false,
				showGfcc:false,
				showHyzk:false,
				apiMobele:'',
				isNewAdd:true,
				formInfo:{
					real_name:'',
					mobile:'',
					code:'',
					idcard:'',
					zw:'',
					qwyx:'',
					zs:'',
					xl:'',
					yysp:'',
					gzjy:'',
					cblx:'',
					hxyq:'',
					zqdc_time:'',
					jg:'',
					gr_photo:'',
					height:'',
					weight:'',
					blood_type:'',
					gfcc:'',
					shoe_size:'',
					hyzk:'',
					jjlxr_name:'',
					jjlxr_gx:'',
					jjlxr_mobile:'',
					gj:'中国',
					csd:'',
					byyx:'',
					bysj:'',
					jl_remark:'',
					label_data:'',
					resume_experience:[],
					zs_json:[
						{name:'身份证号码',number:'',time:'',dis:true},
						{name:'护照号码',number:'',time:'',dis:true},
						{name:'海员证号码',number:'',time:'',dis:true},
						{name:'适任证书号码',number:'',time:'',dis:true},
						{name:'服务薄号码',number:'',time:'',dis:true},
						{name:'海船船员培训合格证书',number:'',time:'',dis:true},
						{name:'特殊专业培训证书',number:'',time:'',dis:true},
						{name:'船舶保安员证书',number:'',time:'',dis:true},
						{name:'江证',number:'',time:'',dis:true},
						{name:'外籍证书',number:'',time:'',dis:true},
						{name:'健康证(海事)',number:'',time:'',dis:true},
						{name:'健康证(卫检)',number:'',time:'',dis:true},
						{name:'接种证(霍乱)',number:'',time:'',dis:true},
						{name:'接种证(黄热)',number:'',time:'',dis:true},
					],
					
					zs_file:'',
				},
				disNumArr:['江证','健康证(海事)','健康证(卫检)','接种证(霍乱)','接种证(黄热)'],
				positionArr:[],
				cblxArr:[],
				hxyqArr:[],
				zsArr:[
					['甲一','甲二','丙一','丙二']
				],
				xlArr:[
					['小学','初中','高中','大专','本科']
				],
				engArr:[
					['无法沟通','勉强沟通','正常沟通','非常流畅']
				],
				bloodArr:[
					['A型','B型','AB型','O型']
				],
				gfccArr:[
					['S','M','L','XL','XXL','XXXL']
				],
				hyzkArr:[
					['已婚','未婚','离异']
				],
				allTags:[],
				activeTags:[],
				cityArr:city.getCity().parentCity,
				childCityArr:city.getCity().childCity,
				activeBookItem:{},
				activeExpItem:{},
				activeBookId:'',
				activeEpxId:'',
				userImgs:[],
				fileImgs:[],
				isGetting:false,
				codeText:'获取验证码',
			};
		},
		methods:{
			checkIdCard(){
				return !ruleCheck.checkIdCard(this.formInfo.idcard)
			},
			checkPhone(){
				return !ruleCheck.checkPhone(this.formInfo.mobile)
			},
			getCode() {
			  let result = !ruleCheck.checkPhone(this.formInfo.mobile);
			  if (!this.isGetting && result) {
				this.isGetting = true;
				let timer = null;
				let num = 60;
				this.getSendsms(this.formInfo.mobile);
				timer = setInterval(() => {
				  if (num > 0) {
					num--;
					this.codeText = num + "s后重试";
				  } else {
					this.codeText = "重新获取";
					this.isGetting = false;
					clearInterval(timer);
				  }
				}, 1000);
			  }
			},
			getSendsms(mobile) {
			  let data = {
				mobile: mobile,
			  };
			  
			  api.getRequst(data,'/common/Sms').then((res)=>{
			  	if(res.code==1){
			  		this.$refs.uToast.show({
			  			message:'验证码已发送',
			  		})
			  	}
			  })
			},
			inputIdcard(){
				this.formInfo.zs_json[0].number = this.formInfo.idcard
			},
			tagsFn(item){
				if(this.activeTags.includes(item.name)){
					this.activeTags.splice(this.activeTags.indexOf(item.name),1)
				}else{
					this.activeTags.push(item.name)
				}
			},
			// 删除个人照片
			deletePic(event) {
				this.userImgs.splice(event.index, 1)
			},
			// 删除附件图片
			deleteFilePic(event) {
				this.fileImgs.splice(event.index, 1)
			},
			// 新增附件
			async fileAfter(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileImgs.length
				lists.map((item) => {	
					this.fileImgs.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await upfile.upfile(lists[i].url,'')
					let item = this.fileImgs[fileListLen]
					this.fileImgs.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			// 新增个人照片
			async afterRead(event) {
				console.log(event)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.userImgs.length
				lists.map((item) => {	
					this.userImgs.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await upfile.upfile(lists[i].url,'1')
					let item = this.userImgs[fileListLen]
					this.userImgs.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			getDate(number){
			  let time = new Date(number)
			  console.log(time)
			  const y = time.getFullYear();
			  const m = time.getMonth() < 9 ? `0${time.getMonth() + 1}` : time.getMonth() + 1;
			  const d = time.getDate() < 10 ? `0${time.getDate()}` : time.getDate();
			  const str = `${y}-${m}-${d}`;
			  return str;
			},
			getMonth(number){
				let time = new Date(number)
				const y = time.getFullYear();
				const m = time.getMonth() < 9 ? `0${time.getMonth() + 1}` : time.getMonth() + 1;
				const str = `${y}-${m}`;
				return str;
			},
			confirmDate(e){
				this.activeBookItem.time = this.getDate(e.value)
				this.showDate = false
			},
			confirmShoolDate(e){
				this.formInfo.bysj = this.getDate(e.value)
				this.showShoolDate = false
			},
			sureExpStartFn(e){
				this.activeExpItem.scsj = this.getMonth(e.value)
				this.showStartDate = false
			},
			sureZqdcFn(e){
				this.formInfo.zqdc_time = this.getMonth(e.value)
				this.showzqdc = false
			},
			sureExpEndFn(e){
				this.activeExpItem.xcsj = this.getMonth(e.value)
				this.showEndDate = false
			},
			ctrlShow(index,item){
				this.activeBookId = index
				this.activeBookItem = item
				this.showBookCtrl = true
			},
			expCtrlShow(index,item){
				this.activeExpId = index
				this.activeEpxItem = item
				this.showExpCtrl = true
			},
			editShow(index,item){
				this.activeBookId = index
				this.activeBookItem = item
				this.editBookItem()
			},
			editBookItem(){
				this.showBookCtrl = false
				this.showAddBook = true
			},
			editExpItem(){
				this.showExpCtrl = false
				this.showAddExp = true
			},
			addBookItem(){
				this.activeBookItem = {
					name:"",
					number:"",
					time:"",
					dis:false,
				}
				this.activeBookId = ''
				this.showAddBook =true
			},
			addExpItem(){
				this.activeExpItem = {
					cm:'',
					cx:'',
					zd:'',
					ml:'',
					zw:'',
					hx:'',
					scsj:'',
					xcsj:'',
					comName:'',
				}
				this.activeExpId = ''
				this.showAddExp = true
			},
			sureAddExp(){
				let tipData = {
					bgColor: '#e47470',
					message: '',
					safeAreaInsetTop:true,
				}
				if(!this.activeExpItem.comName){
					tipData.message = '公司名称不能为空'
					this.$refs.uNotify.show(tipData)
					return false
				}else if(!this.activeExpItem.cm){
					tipData.message = '请输入船名'
					this.$refs.uNotify.show(tipData)
					return false
				}else if(!this.activeExpItem.zw){
					tipData.message = '请输入职务'
					this.$refs.uNotify.show(tipData)
					return false
				}else if(!this.activeExpItem.cx){
					tipData.message = '请输入船型'
					this.$refs.uNotify.show(tipData)
					return false
				}else if(!this.activeExpItem.scsj){
					tipData.message = '请选择上船时间'
					this.$refs.uNotify.show(tipData)
					return false
				}else if(!this.activeExpItem.xcsj){
					tipData.message = '请选择下船时间'
					this.$refs.uNotify.show(tipData)
					return false
				}else if(this.activeExpItem.xcsj<this.activeExpItem.scsj){
					tipData.message = '下船时间不能在上船时间前'
					this.$refs.uNotify.show(tipData)
					return false
				}
				if(this.activeExpId===''){
					this.formInfo.resume_experience.push(this.activeExpItem)
				}else{
					this.formInfo.resume_experience[this.activeExpId] = this.activeExpItem
				}
				this.showAddExp = false
			},
			sureAddBook(){
				let tipData = {
					bgColor: '#e47470',
					message: '',
					safeAreaInsetTop:true,
				}
				console.log(this.activeBookItem.time)
				if(!this.activeBookItem.name){
					tipData.message = '证书名称不能为空'
					this.$refs.uNotify.show(tipData)
					return false
				}
				if(this.activeBookId===''){
					this.formInfo.zs_json.push(this.activeBookItem)
				}else{
					this.formInfo.zs_json[this.activeBookId] = this.activeBookItem
				}
				this.showAddBook = false
			},
			showSecondDeleteFn(){
				this.showBookCtrl = false
				this.showDeleteBook = true
			},
			showExpDeleteFn(){
				this.showExpCtrl = false
				this.showDeleteExp = true
			},
			deleteBookItem(){
				this.formInfo.zs_json.splice(this.activeBookId,1)
				this.showDeleteBook = false
			},
			deleteExpItem(){
				this.formInfo.resume_experience.splice(this.activeExpId,1)
				this.showDeleteExp = false
			},
			checkRule(data){
				let tipData = {
					bgColor: '#e47470',
					message: '',
					safeAreaInsetTop:true,
				}
				if(!data.real_name){
					tipData.message = '姓名不能为空'
					this.$refs.uNotify.show(tipData)
					return false
				}else if(ruleCheck.checkPhone(data.mobile)){
					tipData.message = ruleCheck.checkPhone(data.mobile)
					this.$refs.uNotify.show(tipData)
					return false
				}else if(((this.apiMobele&&this.apiMobele!=data.mobile)&&data.code=='')||(this.isNewAdd&&data.code=='')){
				    //编辑且手机号改了才会进入判断
					tipData.message = '验证码不能为空'
					this.$refs.uNotify.show(tipData)
					return false
				}else if(((this.apiMobele&&this.apiMobele!=data.mobile)&&data.code.length!=4)||(this.isNewAdd&&data.code=='')){
					//编辑且手机号改了才会进入判断
					tipData.message = '验证码不正确'
					this.$refs.uNotify.show(tipData)
					return false
				}else if(ruleCheck.checkIdCard(data.idcard)){
					tipData.message = ruleCheck.checkIdCard(data.idcard)
					this.$refs.uNotify.show(tipData)
					return false
				}
				 else if(!data.zw){
					tipData.message = '申请职位不能为空'
					this.$refs.uNotify.show(tipData)
					return false
				}else if(!data.zs){
					tipData.message = '等级证书不能为空'
					this.$refs.uNotify.show(tipData)
					return false
				}else if(ruleCheck.checkIntNumber(data.qwyx)){
					tipData.message = '期望薪资'+ruleCheck.checkIntNumber(data.qwyx)
					this.$refs.uNotify.show(tipData)
					return false
				}else if(!data.xl){
					tipData.message = '请选择学历'
					this.$refs.uNotify.show(tipData)
					return false
				}else if(!data.yysp){
					tipData.message = '请选择英语水平'
					this.$refs.uNotify.show(tipData)
					return false
				}else if(ruleCheck.checkIntNumber(data.gzjy)){
					tipData.message = '工作经验'+ruleCheck.checkIntNumber(data.gzjy)
					this.$refs.uNotify.show(tipData)
					return false
				}else if(!data.cblx){
					tipData.message = '请选择期望的船舶类型'
					this.$refs.uNotify.show(tipData)
					return false
				}else if(!data.hxyq){
					tipData.message = '请选择期望的航线'
					this.$refs.uNotify.show(tipData)
					return false
				}else if(!data.jg){
					tipData.message = '请输入你当前城市及住址'
					this.$refs.uNotify.show(tipData)
					return false
				}else{
					return true
				}
			},
			modalSure(){
				uni.redirectTo({
					url: '/pages/index/index'
				});
			},
			 saveFn(){
				this.formInfo.gr_photo = this.userImgs.map(item=>item.url).join(',')
				this.formInfo.zs_file = this.fileImgs.map(item=>item.url).join(',')
				this.formInfo.label_data = this.activeTags.join(',')
			   let result =	this.checkRule(this.formInfo)
			   console.log(result)
			   if(result){
				   this.showSub = true
				   api.getRequst(this.formInfo,'/api/My/saveBiographicalNotes').then((res)=>{
				   	if(res.code==1){
						this.showModal = true
						this.modalCont = '简历保存成功，可以开始进行岗位投递报名啦～'
				   	}
					this.showSub =false
				   })
			   }
			},
			downFn(){
				uni.navigateTo({
					url: 'downBook/downBook'
				});
			},
			positionSureFn(data){
				this.formInfo.zw = data.value[0]
				this.showPosition = false
			},
			zsSureFn(data){
				this.formInfo.zs = data.value[0]
				this.showzs = false
			},
			xlSureFn(data){
				this.formInfo.xl = data.value[0]
				this.showxl = false
			},
			engSureFn(data){
				this.formInfo.yysp = data.value[0]
				this.showEng = false
			},
			cblxSureFn(data){
				this.formInfo.cblx = data.value[0]
				this.showcblx = false
			},
			hxyqSureFn(data){
				this.formInfo.hxyq = data.value[0]
				this.showhxyq = false
			},
			citySureFn(data){
				this.formInfo.csd = data.value.join('-')
				this.showCity = false
			},
			bloodSureFn(data){
				this.formInfo.blood_type = data.value[0]
				this.showBlood = false
			},
			gfccSureFn(data){
				this.formInfo.gfcc  = data.value[0]
				this.showGfcc = false
			},
			hyzkSureFn(data){
				this.formInfo.hyzk  = data.value[0]
				this.showHyzk = false
			},
			changeCityFn(e){
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.cityPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.childCityArr[index])
				}
			},
			getData(){
				api.getRequst({},'/api/My/showBiographicalNotes').then((res)=>{
					if(res.code==1&&res.data){
						this.isNewAdd = false
						this.formInfo = res.data
						this.formInfo.resume_experience = this.formInfo.resume_experience || []
						this.formInfo['code'] = ''
						this.formInfo.gj = this.formInfo.gj||'中国'
						this.apiMobele = res.data.mobile
						if(res.data.label_data){
							this.activeTags = res.data.label_data.split(',')
						}
						if(res.data.gr_photo){
							this.userImgs = res.data.gr_photo.split(',').map(item=>{
								return {
									status: 'success',
									message: '',
									url: item
								}
							})
						}
						if(res.data.zs_file){
							this.fileImgs = res.data.zs_file.split(',').map(item=>{
								return {
									status: 'success',
									message: '',
									url: item
								}
							})
						}
					}
					this.showCont = true
				})
			}
		},
		async onLoad(option) {
			let _positionArr = await getCate.getCateFn(3)
			this.positionArr = [_positionArr.map((item)=>item.name)]
			let _cblxArr = await getCate.getCateFn(1)
			this.cblxArr = [_cblxArr.map((item)=>item.name)]
			let _hxyqArr = await getCate.getCateFn(2)
			this.hxyqArr = [_hxyqArr.map((item)=>item.name)]
			this.allTags = await getCate.getCateFn(5)
			this.getData()
		}
	}
</script>

<style lang="scss">
.showCont{
	min-height: 100vh;
	background-color: #f8f8f8;
	box-sizing: border-box;
	padding-bottom: 130rpx;
	.bannerCont{
		padding-top: 40rpx;
		background-image: linear-gradient(to bottom,#3f55cc,#f8f8f8);
		image{
			width: 100%;
		}
	}
	.formCont{
		background-color: #fff;
		border-radius: 30rpx;
		padding: 30rpx 30rpx 30rpx;
		width: 92%;
		margin: 30rpx auto 30rpx;
		box-sizing: border-box;
		// position: relative;
		// z-index: 1;
		.formTitle{
			font-size: 32rpx;
			
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.titleTip{
				font-size: 24rpx;
				font-weight: normal;
				color: #666;
			}
			.closeOpen{
				color: #3f55cc;
				font-size: 24rpx;
				font-weight: normal;
			}
		}
		.tagsCont{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			margin-top: 30rpx;
			.tagsItem{
				padding: 10rpx 24rpx;
				border-radius: 6rpx;
				background-color:#f8f8f8;
				color: #999;
				font-size: 22rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}
			.tagsActive{
				background-color: #3f55cc;
				color: #fff;
			}
		}
		.fileGroup{
			margin-top: 30rpx;
		}
		.formMain{
			padding-top: 30rpx;
			padding-bottom: 30rpx;
		}
		.addBtn{
			width: 100%;
			text-align: center;
			padding: 25rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			margin-top: 30rpx;
			border: 1px solid #3f55cc;
			color: #3f55cc;
		}
		.formItem{
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			background-color: #f8f8f8;
			padding: 25rpx 50rpx;
			box-sizing: border-box;
			border-radius: 50rpx;
			.inputName {
			  width: 150rpx;
			  position: relative;
			  font-size: 28rpx;
			  .mustIcon {
				font-size: 28rpx;
				top: 0;
				left: -16rpx;
				position: absolute;
				color: #ff5757;
			  }
			}
			.inputOut {
				flex: 1;
				width: 3rem;
				position: relative;
				.inputMask {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					z-index: 2;
				  }
				  input{
					width: 100%;
					border: none;
					background: none;
					outline: none;
					position: relative;
					z-index: 1;
					font-size: 28rpx;
				  }
			}
			.inputValue{
				flex: 1;
				width: 100rpx;
			}
			.getCode{
				font-size: 24rpx;
				color: #3f55cc;
			}
			.disCode{
				color: #999;
			}
			.icon-xiala{
				color: #999;
			}
			.icon-gouxuan1{
				color: #3f55cc;
			}
		}
		.no_bg{
			background-color: #fff;
			align-items: flex-start;
		}
		.bookItem{
			background-color: #f8f8f8;
			border-radius: 10rpx;
			padding: 30rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			.bookTop{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.name{
					display: flex;
					align-items: center;
					font-weight: bold;
					font-size: 26rpx;
					.iconfont{
						margin-right: 15rpx;
					}
				}
				
				
			}
			.bookInfo{
				color: #666;
				font-size: 24rpx;
				.number{
					margin-top: 15rpx;
				}
				.bookTime{
					color: #666;
					margin-top: 15rpx;
					font-size: 24rpx;
				}
			}
			.epxInfo{
				color: #333;
				font-size: 24rpx;
				margin-top: 10rpx;
			}
			.expItems{
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				color: #333;
				.expItem{
					width: 48%;
					font-size: 24rpx;
					margin-top: 8rpx;
				}
			}
		}
	}
	.hasTop{
		margin-top: -20rpx;
	}
	.ctrlGroup{
		.ctrlItem{
			display: flex;
			justify-content: center;
			padding: 30rpx 0;
			letter-spacing: 2rpx;
		}
		.hasBottom{
			border-bottom: 1px solid #f6f7f9;
		}
	}
	.ctrlCont{
		background-color: #fff;
		position: fixed;
		left: 0%;
		bottom: 0rpx;
		width: 100%;
		z-index: 999;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 4%;
		box-sizing: border-box;
		.saveBtn{
			width: 100%;
			border-radius: 50rpx;
			background-image: linear-gradient(to right bottom,#89afff,#3f55cc);
			// background-color: #3f55cc;
			// border: 1px solid #3f55cc;
			color: #fff;
			font-size: 24rpx;
			padding: 26rpx 0;
			text-align: center;
		}
		.plainBtn{
			background-color: #fff;
			border: 1px solid #3f55cc;
			color: #3f55cc;
		}
	}
	
}
.maskCont{
	padding: 40rpx 4%;
	box-sizing: border-box;
	.maskHead{
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
	}
	.maskInfo{
		.bookAddBtn{
			width: 100%;
			border-radius: 50rpx;
			background-image: linear-gradient(to right bottom,#89afff,#3f55cc);
			color: #fff;
			font-size: 24rpx;
			padding: 30rpx 0;
			text-align: center;
			z-index: 2;
			margin-top: 40rpx;
		}
	}
}
</style>

